<template>
  <view class="question-container">
    <!-- 应用信息头部 -->
    <view class="app-header">
      <view class="app-info">
        <text class="app-name">{{ appData.appName }}</text>
        <text class="app-type">{{ appData.appType === 1 ? 'MBTI测试' : '得分测试' }}</text>
      </view>
      <text class="app-desc">{{ appData.appDesc }}</text>
      <view class="author-info">
        <image 
          class="author-avatar" 
          :src="appData.user?.userAvatar" 
          mode="aspectFill"
        />
        <text class="author-name">{{ appData.user?.userName }}</text>
      </view>
    </view>

    <!-- 题目内容 -->
    <view class="question-content">
      <text class="question-text">{{ questionData.content }}</text>
      
      <view class="options-list">
        <view 
          v-for="(option, index) in questionData.options" 
          :key="index"
          class="option-item"
          :class="{ selected: selectedAnswer === index }"
          @click="selectAnswer(index)"
        >
          <text class="option-label">{{ ['A', 'B', 'C', 'D'][index] }}</text>
          <text class="option-text">{{ option }}</text>
        </view>
      </view>
    </view>
    
    <view class="action-buttons">
      <button class="btn prev" @click="prevQuestion">上一题</button>
      <button class="btn submit" @click="submitAnswer">提交答案</button>
      <button class="btn next" @click="nextQuestion">下一题</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request.js'

const currentNumber = ref(1)
const total = ref(20)
const selectedAnswer = ref(null)
const questionData = ref({})
const appData = ref({})
const appId = ref(null)

// 获取应用详情
const getAppDetail = async (id) => {
  try {
    const res = await request({
      url: '/api/app/get/vo',
      method: 'GET',
      params: { id }
    })
    
    if (res.code === 0 && res.data) {
      appData.value = res.data
      // 获取应用下的题目列表
      getQuestionList(id)
    }
  } catch (error) {
    console.error('获取应用详情失败:', error)
    uni.showToast({
      title: '获取详情失败',
      icon: 'none'
    })
  }
}

// 获取题目列表
const getQuestionList = async (appId) => {
  try {
    const res = await request({
      url: '/api/question/list/page/vo',
      method: 'POST',
      data: {
        current: 1,
        pageSize: 100,
        appId,
        sortField: 'createTime',
        sortOrder: 'desc'
      }
    })
    
    if (res.code === 0 && res.data?.records) {
      // 设置题目总数
      total.value = res.data.records.length
      // 获取第一题
      if (res.data.records[0]) {
        loadQuestion(res.data.records[0])
      }
    }
  } catch (error) {
    console.error('获取题目列表失败:', error)
  }
}

// 加载题目内容
const loadQuestion = (question) => {
  const questionContent = question.questionContent?.[0] || {}
  questionData.value = {
    content: questionContent.title || '',
    options: questionContent.options?.map(opt => opt.value) || []
  }
}

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  appId.value = currentPage.options.id
  
  if (appId.value) {
    getAppDetail(appId.value)
  }
})

// 提交答案
const submitAnswer = async () => {
  if (selectedAnswer.value === null) {
    uni.showToast({
      title: '请选择答案',
      icon: 'none'
    })
    return
  }
  
  try {
    const res = await request({
      url: '/api/userAnswer/add',
      method: 'POST',
      data: {
        appId: null,
        choices: [String(selectedAnswer.value)],
        id: questionId.value
      }
    })
    
    if (res.code === 0) {
      const isCorrect = selectedAnswer.value === questionData.value.answer
      uni.showToast({
        title: isCorrect ? '回答正确!' : '回答错误',
        icon: isCorrect ? 'success' : 'error'
      })
      
      setTimeout(() => {
        nextQuestion()
      }, 1500)
    }
  } catch (error) {
    console.error('提交答案失败:', error)
    uni.showToast({
      title: '提交失败',
      icon: 'none'
    })
  }
}

const selectAnswer = (index) => {
  selectedAnswer.value = index
}

const prevQuestion = () => {
  if (currentNumber.value > 1) {
    currentNumber.value--
    // 获取上一题
    getQuestionDetail(questionId.value - 1)
  }
}

const nextQuestion = () => {
  if (currentNumber.value < total.value) {
    currentNumber.value++
    // 获取下一题
    getQuestionDetail(questionId.value + 1)
  }
}
</script>

<style scoped>
.question-container {
  padding: 30rpx;
  background: #fff;
  min-height: 100vh;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.question-number {
  font-size: 32rpx;
  color: #666;
}

.question-type {
  font-size: 28rpx;
  color: #4CAF50;
  background: #E8F5E9;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}

.question-content {
  margin-bottom: 60rpx;
}

.question-text {
  font-size: 34rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #F5F5F5;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.option-item.selected {
  background: #E3F2FD;
  border: 2rpx solid #2196F3;
}

.option-label {
  width: 60rpx;
  height: 60rpx;
  background: #fff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
}

.option-text {
  font-size: 30rpx;
  color: #333;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 0;
}

.btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.btn.prev {
  background: #F5F5F5;
  color: #666;
}

.btn.submit {
  background: #4CAF50;
  color: #fff;
}

.btn.next {
  background: #2196F3;
  color: #fff;
}

.app-header {
  background: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.app-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.app-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.app-type {
  font-size: 24rpx;
  color: #4CAF50;
  background: #E8F5E9;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}

.app-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.author-info {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  margin-right: 12rpx;
}

.author-name {
  font-size: 26rpx;
  color: #666;
}
</style> 